<template>
    <footer class="footer">
        <span class="todo-count"><strong>{{total}}</strong> 条</span>
        <ul class="filters">
            <li><a @click="filterData(0)" :class="{selected:selIndex==0}" href="#/">所有</a></li>
            <li><a @click="filterData(1)" :class="{selected:selIndex==1}" href="#/active">进行中</a></li>
            <li><a @click="filterData(2)" :class="{selected:selIndex==2}" href="#/completed">完成</a></li>
        </ul>
        <button @click="clear" class="clear-completed">清除完成事项</button>
    </footer>
</template>

<script>
export default {
    data(){
        return {
            selIndex:0
        }
    },
    methods:{
        clear(){
            this.$emit("clear");
        },
        filterData(index){
            this.selIndex=index;
            this.$emit("screening",index);
        }
    },
    props:{
        total:{
            type:Number,
            default:0
        }
    }
}
</script>

<style>

</style>